<!doctype html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
		<meta http-equiv="content-script-type" content="text/javascript">
		<meta http-equiv="content-style-type" content="text/css">
		<meta name="author" content="Heidi Rakels">
		<meta name="description" content="Sanaware Java Docking - Developer guide - Dockables">
		<link rel="stylesheet" type="text/css" href="../style.css">
		<title>How to Use Dockables</title>
	</head>
<body>

<div class="nextprev">
<nobr><a href="index.html">&laquo; prev</a></nobr>
<a href="leafdock.html">next &raquo;</a></nobr>
</div>

<span class="item"><a href="../main/index.html">Java Docking Home</a></span>&gt;
<span class="item"><a href="index.html">Developer Guide</a></span>&gt;
<span class="selected item">How to Use Dockables</span>

<h2>
How to Use Dockables
</h2>

<h3>
:: A dockable for a UI component ::
</h3>
<p>
If you want to add docking functionality to a UI component, you have to create a 
<a href="../javadoc/com/javadocking/dockable/Dockable.html" target="_blank">Dockable</a> for it. Give your component as content to the dockable.
<blockquote><pre>
		// Create the content component.
		TextPanel textPanel = new TextPanel("I am window 1.");

		// Create the dockable around the content component.
		Dockable dockable = new DefaultDockable("Window1", textPanel, "Window", null, DockingMode.ALL);
</pre></blockquote>
The first parameter for the DefaultDockable is the ID of the dockable.
The IDs of all the dockables in your application should be different.
</p>

<h3>
:: A dockable with an icon and a description ::
</h3>
<p>
You can given the dockable an icon and a description.
The icon will be displayed in the header of the dock, where the dockable is docked.
The description will appear as tooltip above the header.
<blockquote><pre>
		// Create the dockable around the content component.
		Icon icon = new ImageIcon(getClass().getResource("/com/javadocking/resources/images/text12.gif"));
		DefaultDockable dockable = new DefaultDockable("Window1", textPanel, "Window", icon);
		dockable.setDescription("Window with text");	
</pre></blockquote>
</p>

<a name="DockingMode"><!-- --></a>
<h3>
:: Specifying the docks where a dockable can be docked ::
</h3>
<p>
You can specify in what kind of docks the dockable may be docked by setting the docking mode.
The different docking modes are defined in the class 
<a href="../javadoc/com/javadocking/dockable/DockingMode.html" target="_blank">DockingMode</a>.
</p>
<p>
In the folowing example the dockables can't float.
<blockquote><pre>
		// We don't want the dockables to float.
		int dockingModes = DockingMode.ALL - DockingMode.FLOAT;
		
		// Create the dockables around the content components.
		Dockable dockable = new DefaultDockable("Window1", textPanel, "Window", icon, dockingModes);
</pre></blockquote>
</p>

<a name="ActionDockable"><!-- --></a>
<h3>
:: A dockable with actions ::
</h3>
<p>
You can decorate a dockable with actions by using an <a href="../javadoc/com/javadocking/dockable/ActionDockable.html" target="_blank">
ActionDockable</a>.
First you have to create your basic dockable. Then you create the wrapper action dockable around the dockable,
that adds actions to it.
</p>
<p>
In the folowing example the dockable is first decorated with a close action. 
Then it is decorated with 2 other actions.
<blockquote><pre>
		// Create the dockable around the content component.
		Dockable dockable = new DefaultDockable("Window1", textPanel, "Window", new ImageIcon("resources/images/text12.gif"));

		// Decorate the dockable with a close action.		
		dockable = new StateActionDockable(dockable, new DefaultDockableStateActionFactory(), DockableState.STATES_CLOSED);
		
		// Decorate the dockable with another action.
		MessageAction helloAction = new MessageAction(this, "Hello", new ImageIcon("/com/javadocking/resources/images/hello12.gif"), "Hello world!");
		MessageAction cautionAction = new MessageAction(this, "Caution", new ImageIcon("/com/javadocking/resources/images/caution12.gif"), "Be Careful!");
		Action[][] actions = new Action[1][];
		actions[0] = new Action[2];
		actions[0][0] = helloAction;
		actions[0][1] = cautionAction;
		dockable = new ActionDockable(dockable, actions);
</pre></blockquote>
</p>

<a name="DragListener"><!-- --></a>
<h3>
:: Dragging functionality on the content of the dockable ::
</h3>
<p>
A dockable can always be dragged by dragging the header of the dock, in which it is docked.
It is also possible to drag the dockable by dragging its content.
</p>
<p>
If you want that, the content of your dockable should implement the interface 
<a href="../javadoc/com/javadocking/dockable/DraggableContent.html" target="_blank">DraggableContent</a>.
This interface contains one method addDragListener(DragListener). The drag listener should be added as mouse listener
and mouse motion listener on every component with which you want to be able to drag the dockable.
</p>
<p>
A possible implementation is:
<blockquote><pre>
		public void addDragListener(DragListener dragListener)
		{
			this.addMouseListener(dragListener);
			this.addMouseMotionListener(dragListener);
			label.addMouseListener(dragListener);
			label.addMouseMotionListener(dragListener);
		}
</pre></blockquote>
</p>

<hr>
<br/>
The source code of the samples can be found in:
<br/><br/>
<table>
<tr>
	<td><a href="code/SimpleDockable.java.html">SimpleDockable</a></td><td>Shows a simple dockable.</td>
</tr>
<tr>
	<td><a href="code/IconDockable.java.html">IconDockable</a></td><td>Shows a dockable with an icon and tooltip.</td>
</tr>
<tr>
	<td><a href="code/NotFloatingDockable.java.html">NotFloatingDockable</a></td><td>Shows a dockable that cannot float.</td>
</tr>
<tr>
	<td><a href="code/ActionsDockable.java.html">ActionsDockable</a></td><td>Shows a dockable with actions.</td>
</tr>
</table>

<br/>
<hr>
<br/>

<div class="nextprevbottom">
<nobr><a href="index.html">&laquo; prev</a></nobr>
<a href="leafdock.html">next &raquo;</a></nobr>
</div>

</body>



</html>